import React from 'react';
import { Thumbnail, Col } from 'react-bootstrap';

const styles = {
    infoLable: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    image: {
        width: '57px',
        height: '57px'
    },
    lock: {
        position: 'absolute',
        width: '30px',
        right: '25px',
        top: '30px'
    }
}

const MeetItem = ({ creator, createTime, mName, vid, needPwd }) => {
    const showTime = new Date(parseInt(createTime, 10)).toLocaleString();

    return <div>
        <Col xs={6} md={4}>
        <Thumbnail>
            <h3>{mName}</h3>
            <img src={require('./lock.png')} alt="lock" style={{
                ...styles.lock,
                display: `${needPwd ? 'block' : 'None'}`
            }}/>
            <div style={styles.infoLable}>
                <div>
                    <p>创建时间：{showTime}</p>
                    <p>创建人：{creator}</p>
                </div>
                <div>
                    <img src={require('./ic_meeting.png')} alt="meet" style={styles.image}/>
                </div>
            </div>
        </Thumbnail>
        </Col>
    </div>
}

export default MeetItem;